<template>
  <el-row style="text-align: center;">
    <el-col :md="16" :sm="24">
      <el-carousel style="height: 300px;">
        <el-carousel-item v-for="item in carousel" :key="item.id">
          <img :src="item.imgUrl" class="image" @click="gotoContent(item.id)"/>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col class="hidden-sm-and-down" :span="8">
      <el-carousel style="height: 300px;" direction="vertical">
        <el-carousel-item v-for="item in carouselVel" :key="item.id">
          <img :src="item.imgUrl" class="image" @click="gotoContent(item.id)"/>
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      carousel: [],
      carouselVel: []
    };
  },
  methods: {
    findCarousel() {
      this.$axios
        .get(this.$const.domain + "/v1/recommend/carousel?page=0&size=4")
        .then(res => {
          if(res.data.code == 200) {
            this.carousel = res.data.data;
          } else{
            this.$message("获取轮播图失败");
          }
        })
        .catch(error => {
          console.log(error);
          this.$message.error("网络错误，不能访问");
        });
    },
    findCarouselVel() {
      this.$axios
        .get(this.$const.domain + "/v1/recommend/carousel?page=1&size=4")
        .then(res => {
          if(res.data.code == 200) {
            this.carouselVel = res.data.data;
          } else{
            this.$message("获取轮播图失败");
          }
        })
        .catch(error => {
          console.log(error);
          this.$message.error("网络错误，不能访问");
        });
    },
    gotoContent(contentId) {
      this.$router.push("/content/" + contentId);
    }
  },
  mounted() {
    this.findCarousel();
    this.findCarouselVel();
  }
};
</script>